<!--  -->
<template>
  <div class="page-main-body-box">
    <div class="meedu-main-body">
      <div class="back-bar-box mb-30">
        <div class="btn-back" @click.stop="goBack">
          <i class="el-icon-back"></i> 返回
        </div>
        <div class="line"></div>
        <div class="name">编辑管理员</div>
      </div>

      <!--表格 组件 -->
      <div class="float-left">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="角色" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择">
              <el-option
                v-for="item in regiondata.roles"
                :key="item.id"
                :label="item.display_name"
                :value="item.display_name"
                prop=""
              ></el-option>
            </el-select>
            <span class="el-link--inner" @click.stop="handleRegion"
              >角色管理</span
            >
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" show-password></el-input>
            <div class="helper-text">
              <i class="el-icon-info"></i
              ><span class="ml-4">不修改密码请勿填写</span>
              <span class="ml-5" v-show="pattern">
                密码至少包含大写字母，小写字母，数字，且不少于12位</span
              >
            </div>
          </el-form-item>

          <el-form-item label="禁止登录" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
        </el-form>
      </div>

      <!--表格 组件 -->
      <!--分页 组件 -->

      <!--分页 组件 -->

      <div class="bottom-menus">
        <div class="bottom-menus-box">
          <div>
            <el-button type="primary" @click.stop="handleConserve('ruleForm')"
              >保存</el-button
            >
          </div>
          <div class="ml-24">
            <el-button @click.stop="resetForm('ruleForm')">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // defaultData: {},
      pattern: false,
      regiondata: {},
      ruleForm: {
        // id: this.$route.query.id,
        region: "",
        name: "",
        email: "",
        password: "",
        delivery: false,
      },
      rules: {
        region: [{ required: true, message: "请选择", trigger: "change" }],
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goBack: function () {
      // window.history.go(-1)
      // 表示返回上一页
      this.$router.go(-1);
    },

    //角色管理
    handleRegion: function () {
      this.$router.push({
        path: "/SystemAdministrator/adminroles",
      });
    },

    //提交数据
    handleConserve(ruleForm) {
      if (this.ruleForm.password == null) {
        delete this.ruleForm.password;
      } else {
        if (
          !/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])[0-9a-zA-Z]{12,20}$/.test(
            this.ruleForm.password
          )
        ) {
          this.pattern = true;
          return;
        }
      }
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          console.log("提交表单");
          this.$request
            .post(`administrator`, this.resetForm)
            .then((res) => {
              console.log(res);
              this.$message.success(this.$t("common.success"));
              this.$router.back();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });

          // this.$request
          //   .get("/administrator", {
          //     params: {
          //       page: 1,
          //       size: 10,
          //       sort: "id",
          //       order: "desc",
          //       region: this.ruleForm.region,
          //       name: this.ruleForm.name,
          //       email: this.ruleForm.email,
          //       password: this.ruleForm.password,
          //     },
          //   })
          //   .then((res) => {
          //     console.log(res);
          //     if (res.data.status == 0) {
          //       this.$message("添加成功！");
          //       this.$router.go(-1);
          //     }
          //     if (res.data.status == 500) {
          //       this.$message("请输入合法邮箱");
          //     }
          //   });
        } else {
          this.$message("编辑失败！");
          return false;
        }
      });
    },
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    // 1. 通过请求获取首页数据
    let res = await this.$request.get("/administrator/create");
    // console.log(res);
    this.regiondata = res.data;
    // console.log(this.regiondata);

    //通过请求获取该页数据
    let res1 = await this.$request.get(
      `/administrator/${this.$route.query.id}`
    );

    console.log(res1);
    // this.defaultData = res1.data;
    let { name, email } = res1.data;
    this.ruleForm.name = name;
    this.ruleForm.email = email;
    // console.log(this.defaultData);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // console.log(this.$route);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.page-main-body-box {
  flex: 1;
  height: 100%;
  box-sizing: border-box;
  // padding: 20px 5px 20px 20px;
  // overflow-y: auto;
  background-color: #f1f2f9;
  .meedu-main-body {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;

    .back-bar-box.mb-30 {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: 30px;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        .el-icon-back {
          font-family: element-icons !important;
          //   speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }

    // 组件
    .float-left {
      width: 100%;
      height: auto;
      float: left;

      // /deep/.el-select {
      //   width: 300px;
      // }
      /deep/.el-input {
        width: 300px;
      }

      /deep/.helper-text {
        margin-left: 10px;
        color: rgba(0, 0, 0, 0.5);
        display: inline-block;
        .ml-5 {
          color: red;
        }
      }
      /deep/.el-link--inner {
        margin-left: 10px;
        color: #66b1ff;
        box-sizing: border-box;
      }
      /deep/.el-link--inner:hover {
        box-sizing: border-box;
        border-bottom: 1px solid #66b1ff;
      }
    }

    //保存

    .bottom-menus {
      width: 100%;
      height: 1px;
      float: left;
      .bottom-menus-box {
        position: fixed;
        bottom: 0;
        left: 200px;
        right: 0;
        z-index: 2000;
        box-sizing: border-box;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        background-color: #fff;
        display: flex;
        box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);
        div {
          .el-button.el-button--primary {
            font-weight: 400;
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            // background: #fff;
            border: 1px solid #dcdfe6;
            // color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            transition: 0.1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            -webkit-user-select: none;
            span {
            }
          }
        }

        .ml-24 {
          margin-left: 24px;
          .el-button.el-button--default {
            font-weight: 400;
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: 0;
            margin: 0;
            transition: 0.1s;
            font-weight: 500;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            span {
            }
          }
        }
      }
    }
  }
}
</style>
